<template>
  <div class="issues-detail" v-loading="issueLoading">
    <template v-if="issueData">
      <header class="issues-detail__header">
        <h1 class="issues-detail__title">
          {{issueData.title}}
        </h1>
        <div class="issues-detail__info">
          <Open-browser :href="issueData.html_url" class="issues-item__number">#{{issueData.number}}</Open-browser> by
          <Open-browser
            v-if="issueData.user"
            class="issues-item__creator"
            :href="issueData.user.html_url"
          >
            {{issueData.user.name}}
          </Open-browser>
          <span class="issues-detail__gray">
            创建于
            <timeago :datetime="issueData.created_at"/>
          </span>
        </div>
      </header>
      <div class="issues-detail__content" @click="onClickMarkdown">
        <Markdown-it-vue :content="issueData.body"/>
      </div>
      <div class="issues-detail__back-but" @click="onClickBack">
        <i class="el-icon-arrow-left"></i>
      </div>
    </template>
    <No-content v-else/>
    <div class="issues-detail__comments">
      <Comments
        v-if="issueData"
        v-infinite-scroll="onLoadMoreComments"
        :total="issueData.comments"
        :data="currentComments"
        :loading="commentsLoading"
        :creator="issueData.user"
      />
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import MarkdownItVue from 'markdown-it-vue'
import Comments from '@/components/Issues/Comments'
import 'markdown-it-vue/dist/markdown-it-vue.css'
import { openInBrowser } from '@/utils'
import NoContent from '@/components/NoContent'

export default {
  name: 'issueDetail',
  components: {
    MarkdownItVue,
    Comments,
    NoContent
  },
  created () {
    const params = this.$route.params
    this.$store.dispatch('issues/getIssue', {
      number: this.issueNumber,
      currentRepo: `${params.owner}/${params.repo}`
    })
  },
  computed: {
    ...mapState('issues', [
      'issues',
      'issueLoading',
      'currentIssue',
      'currentComments',
      'commentsLoading',
      'commentsLoaded'
    ]),
    issueNumber () {
      return this.$route.params.number
    },
    issueData () {
      if (this.currentIssue) return this.currentIssue
      if (!this.issues) return null
      return this.issues.find(i => i.number === this.issueNumber)
    }
  },
  methods: {
    fetchComments (params = {}) {
      this.$store.dispatch('issues/getIssueComments', {
        ...params,
        url: this.issueData.comments_url
      })
    },

    onLoadMoreComments () {
      if (!this.commentsLoaded) {
        this.fetchComments()
      }
    },

    /**
     * @param {MouseEvent} e 点击事件
     */
    onClickMarkdown (e) {
      if (e.target instanceof HTMLAnchorElement) {
        e.preventDefault()
        openInBrowser(e.target.href)
      }
    },

    onClickBack () {
      this.$router.back()
    }
  },
  watch: {
    issueData (newData, oldData) {
      if (newData && newData !== oldData) {
        this.fetchComments({ page: 1 })
      }
    }
  }
}
</script>

<style lang="scss">
.issues-detail__header {
  padding-bottom: 14px;
  margin: 0;
  margin-bottom: 28px;
  box-shadow: inset 0px -2px 0px 0px #aaa;
}

.issues-detail__title {
  margin: 0;
  font-size: 20px;
}

.issues-detail__gray {
  color: #999;
}

.issues-detail__info {
  font-size: 14px;
  margin-top: 14px;
}

.issues-detail__back-but {
  height: 30px;
  width: 30px;
  font-size: 20px;
  color: #fff;
  position: fixed;
  bottom: 24px;
  right: 48px;
  background-color: #409EFF;
  border-radius: 100%;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.1;
  cursor: pointer;
  transition: all 0.2s;

  &:hover {
    transform: scale(1.2);
    opacity: 0.8;
  }
}

.issues-detail__comments {
  margin-top: 18px;
}
</style>